<template>
  <div class="box" style="overflow: hidden; padding-bottom: 20px">
    <OrderInformation :orderNumber="orderNumber"></OrderInformation>
    <div class="htmlBox" style="overflow: hidden">
      <div class="formAjf">
        <table>
          <tr>
            <td rowspan="9" width="150" class="left">客户信息</td>
            <td width="150" class="title">借款人信息</td>
            <td>{{ showForm.basicBorrowerName }}</td>
            <td width="150" class="title">身份证号码</td>
            <td>{{ showForm.basicBorrowerCard }}</td>
            <td width="150" class="title">借款人电话</td>
            <td>{{ showForm.basicBorrowerPhone }}</td>
          </tr>
          <tr>
            <td class="title">借款人工作单位</td>
            <td>{{ showForm.basicBorrowerWork }}</td>
            <td class="title">借款人婚姻状况</td>
            <td>{{ showForm.basicBorrowerMarriage }}</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td class="title">借款人配偶姓名</td>
            <td>{{ showForm.basicBorrowerMateName }}</td>
            <td class="title">借款人配偶身份证号</td>
            <td>{{ showForm.basicBorrowerMateCard }}</td>
            <td class="title">借款人配偶电话号码</td>
            <td>{{ showForm.basicBorrowerMatePhone }}</td>
          </tr>
          <tr>
            <td class="title">借款人配偶现住地址</td>
            <td>{{ showForm.basicBorrowerMateAddress }}</td>
            <td class="title">借款人配偶工作单位</td>
            <td colspan="3">{{ showForm.basicBorrowerMateWork }}</td>
          </tr>
          <tr>
            <td width="150" class="title">抵押人姓名</td>
            <td>{{ showForm.pledgeName }}</td>
            <td width="150" class="title">身份证号码</td>
            <td>{{ showForm.pledgeCard }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.pledgePhone }}</td>
          </tr>
          <tr>
            <td width="150" class="title">抵押共有人</td>
            <td>{{ showForm.pledgeMateName }}</td>
            <td width="150" class="title">身份证号码</td>
            <td>{{ showForm.pledgeMateCard }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.pledgeMatePhone }}</td>
          </tr>
          <tr>
            <td width="150" class="title">抵押物地址</td>
            <td>{{ showForm.pledgeHouseAddress }}</td>
            <td width="150" class="title">所属区域</td>
            <td v-if="showForm.pledgeHouseDistrict">
              {{ showForm.pledgeHouseDistrict }}
            </td>
            <td v-else>
              {{ showForm.provinceName }}{{ showForm.cityName
              }}{{ showForm.areaName }}
            </td>
            <td colspan="2"></td>
          </tr>
          <tr v-if="showForm.pledgeHouseAddressTwo">
            <td width="150" class="title">抵押物地址二</td>
            <td>{{ showForm.pledgeHouseAddressTwo }}</td>
            <td width="150" class="title">所属区域</td>
            <td>
              {{ showForm.provinceTwoName }}{{ showForm.cityTwoName
              }}{{ showForm.areaTwoName }}
            </td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td class="title">意向贷款金额</td>
            <td>{{ showForm.basicLoansMoney }}(万元)</td>
            <td class="title">贷款期限</td>
            <td>{{ showForm.basicLoansMonths }}(月)</td>
            <td class="title">还款方式</td>
            <td>{{ showForm.approveRepaymentMode }}</td>
          </tr>
          <tr>
            <td width="150" class="title">产权证号</td>
            <td>{{ showForm.pledgeHouseNumber }}</td>
          </tr>
        </table>
      </div>
      <div class="formAjf">
        <table>
          <tr>
            <td width="150" class="left">审批信息</td>
            <td width="150" class="title">审批金额</td>
            <td>{{ showForm.contractGuaranteeMoney }}(万元)</td>
            <td width="150" class="title">贷款期限</td>
            <td>{{ showForm.contractGuaranteeMonth }}(月)</td>
            <td width="150" class="title">还款方式</td>
            <td>{{ showForm.contractRepaymentModel }}</td>
          </tr>
          <tr>
            <td width="150" class="left">财务信息</td>
            <td width="150" class="title">收费金额</td>
            <td>{{ showForm.chargeMoney }}(元)</td>
            <td width="150" class="title">实际收费时间</td>
            <td colspan="3">{{ showForm.chargeTime }}</td>
          </tr>
          <tr>
            <td width="150" class="left">放款信息</td>
            <td width="150" class="title">银行放款金额</td>
            <td>{{ showForm.lendingAmount }}(万元)</td>
            <td width="150" class="title">银行放款时间</td>
            <td colspan="3">{{ showForm.lendingTime }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getOrderTable,
  getFindForm,
  getProductUrl
} from "../../../src/assets/js/api";
import OrderInformation from "./OrderInformation";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "InformationsViewer",
  components: { OrderInformation },
  props: ["orderNumber", "showButton"],
  data() {
    return {
      Vhtml: null,
      productId: null,
      tableList: null,
      centerDialogVisible: false,
      registerUrl: "/business/order/updateForm",
      orderStatus: "",
      showForm: {},
      golbalPermissions: []
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getOrderTable(this.orderNumber);
    this.getFindForm();
    this.findProductUrl(this.orderNumber);
  },
  computed: {
    //上传附件按钮
    showOrderUpdateForm: function() {
      return checkPermiss("business:order:updateForm", this.golbalPermissions);
    },
    //修改按钮
    showOrderRev: function() {
      return checkPermiss("business:order:updateForm", this.golbalPermissions);
    }
  },
  methods: {
    //根据订单查询订单状态
    findProductUrl(orderNumber) {
      getProductUrl({
        orderNumber: orderNumber
      }).then(res => {
        this.orderStatus = res.data.orderStatus;
      });
    },
    // 已中止和已归档基本信息
    getFindForm() {
      getFindForm({ orderNumber: this.orderNumber }).then(res => {
        this.showForm = res.data;
        if (this.showForm.deleteStatus == 1) {
          this.showForm.deleteStatus = "正常";
        }
        if (this.showForm.deleteStatus == 0) {
          this.showForm.deleteStatus = "删除";
        }
      });
    },
    //根据订单号查询表格信息
    getOrderTable(id) {
      getOrderTable(id).then(res => {
        this.tableList = res.data;
      });
    }
  }
};
</script>

<style scoped type="less">
.box {
  height: auto;
  width: 100%;
}
.el-col {
  text-align: left;
}
.el-row {
  padding: 20px 40px;
  line-height: 35px;
  width: 96%;
  margin-left: 2%;
}
.el-button {
  height: 30px;
  width: 80px;
  line-height: 5px;
}
.elDia ::v-deep .el-dialog {
  width: 60% !important;
  margin-top: unset !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.formAjf,
.formAjf table {
  width: 100%;
}
.formAjf table {
  border-collapse: collapse;
  border: none;
}
.formAjf table td {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
  padding-left: 10px;
  border: 1px solid rgba(238, 238, 238, 1);
}
.formAjf .left {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  padding: unset;
}
.formAjf .title {
  background: rgba(59, 157, 248, 0.06);
}
</style>
